File manager - Edit - /home/autoph/public_html/projects/tickets-autohub/resources/views/layouts/authentication/guest/index.blade.php
Back
@extends('layouts.user') @section('css') <style> .chart-container canvas { height: 100% !important; width: 100% !important; transition: width 0.3s, height 0.3s; } </style> {{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"> --}} <link rel="stylesheet" href="{{ asset('icons/bootstrap-icons-1.11.3/font/bootstrap-icons.css') }}"> @endsection {{-- @section('content') <div class="card bg-transparent "> <div class="row"> @can('admin-ticket-dashboard') <div class="row pt-2 pl-4 pr-0 pb-2"> <div class="col-md-12"> <div class="row "> <div class="col-md-8"> <div class="card shadow-lg rounded-lg border-0" style="height: 450px; min-height: 300px;"> <div class="card-header bg-primary text-white text-center py-3"> <h5 class="font-weight-bold mb-0">Department Ticket Summary</h5> </div> <div class="card-body p-4 d-flex flex-wrap justify-content-between align-items-stretch"> <!-- Total Tickets --> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-card-list text-primary" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Total Tickets</h6> <h4 id="totalTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <!-- Open Tickets --> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-folder2-open text-warning" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Open Tickets</h6> <h4 id="openTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <!-- Transferred Tickets --> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-arrow-left-right text-info" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Transferred Tickets</h6> <h4 id="transferredTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <!-- Assigned Tickets --> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-person-check text-success" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Assigned Tickets</h6> <h4 id="assignedTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <!-- Picked Tickets --> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-hand-index-thumb text-danger" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Picked Tickets</h6> <h4 id="pickedTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <!-- Closed Tickets --> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-check-circle text-success" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Closed Tickets</h6> <h4 id="closedTickets" class="font-weight-bold text-dark">0</h4> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card p-3 shadow-lg rounded-lg" style="height: 450px; min-height: 300px;"> <div class="card-header bg-light text-center py-2"> <h5 class="font-weight-bold mb-0 text-dark">Ticket By Priority</h5> </div> <div class="card-body d-flex justify-content-center align-items-center p-2"> <div id="TicketByPriorityContainer" style="width: 100%; height: 400px;"></div> </div> </div> </div> </div> </div> <!-- Other Charts --> <div class="col-md-12 mt-4"> <div class="row"> <div class="col-md-8 mb-4"> <div class="card shadow-lg rounded-lg border-0" style="height: 500px; min-height: 350px;"> <div class="card-body"> <div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="card-title mb-0">Monthly Ticket Summary</h5> <div class="d-flex align-items-center"> <label for="yearForMonthly" class="mb-0 mr-2">Year:</label> <select id="yearForMonthly" class="form-control form-control-sm" style="width: 150px;"> <?php $currentYear = date('Y'); for ($i = 2023; $i <= $currentYear; $i++) { $selected = $i == $currentYear ? 'selected' : ''; echo "<option value='$i' $selected>$i</option>"; } ?> </select> </div> </div> <div id="MonthlyTicketChart" style="width: 100%; height: 400px;"></div> </div> </div> </div> </div> <div class="row g-4"> <!-- Left Column with Multiple Charts --> <div class="col-md-8"> <div class="card"> <button class="btn btn-primary align-self-end float-end mt-2 mr-2" data-bs-toggle="modal" data-bs-target="#dashboard_filter2"> <span class="fa fa-filter"></span> </button> <div class="card-body"> <div class="row g-4"> <div class="col-md-12"> <div class="card p-4"> <center><strong> <h6>SENDER SUMMARY BY COMPANY</h6> </strong></center> <div class="chart-container" style="width: 100%; max-width:100%"> <canvas id="requestPerCompanyChart" height="80"></canvas> </div> </div> </div> </div> </div> </div> </div> <!-- Right Column --> <div class="col-md-4"> <div class="card p-4 shadow-lg rounded-lg"> <div class="card-header bg-light text-center"> <h5 class="font-weight-bold text-dark">Top Support <br> {{ $department ? $department->dept_name : '' }}</h5> </div> <div class="card-body"> <div id="list-support" class="list-group"></div> </div> </div> <div class="card p-4 shadow-lg rounded-lg mt-4"> <div class="card-header bg-light text-center"> <h5 class="font-weight-bold text-dark">Ticket Handling Performance & SLA Compliance </h5> </div> <div class="card-body"> <div id="radarChart" style="min-height: 300px;" class="echart"></div> </div> </div> </div> </div> </div> </div> @endcan </div> </div> @endsection --}} @section('content') <div class="card bg-transparent"> <div class="row"> @can('admin-ticket-dashboard') <!-- Main Flex Container with Spacing --> <div class="d-flex flex-wrap pt-2 pl-4 pr-0 pb-2" style="gap: 20px; border: none !important;"> <!-- Left Column (Department Summary + Monthly Ticket) --> <div class="flex-grow-1" style="min-width: 65%; max-width: 65%;"> <!-- Department Ticket Summary --> <div class="card shadow-lg rounded-lg border-0 mb-4" style="height: 450px;"> <div class="card-headertext-dark text-center py-3"> <h5 class="font-weight-bold mb-0">Department Ticket Summary</h5> </div> <div class="card-body p-4 d-flex flex-wrap justify-content-between align-items-stretch"> <!-- Ticket Boxes --> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-card-list text-primary" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Total Tickets</h6> <h4 id="totalTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-folder2-open text-warning" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Open Tickets</h6> <h4 id="openTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-arrow-left-right text-info" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Transferred Tickets</h6> <h4 id="transferredTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-person-check text-success" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Assigned Tickets</h6> <h4 id="assignedTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-hand-index-thumb text-danger" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Picked Tickets</h6> <h4 id="pickedTickets" class="font-weight-bold text-dark">0</h4> </div> </div> <div class="d-flex align-items-center shadow-sm rounded-lg p-3 bg-light mb-3" style="width: 48%; min-width: 220px;"> <i class="bi bi-check-circle text-success" style="font-size: 2rem;"></i> <div class="ml-3"> <h6 class="text-muted mb-1">Closed Tickets</h6> <h4 id="closedTickets" class="font-weight-bold text-dark">0</h4> </div> </div> </div> </div> <!-- Monthly Ticket Summary --> <div class="card shadow-lg rounded-lg border-0" style="height: 450px;"> <div class="card-body"> <div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="card-title mb-0">Monthly Ticket Summary</h5> <div class="d-flex align-items-center"> <label for="yearForMonthly" class="mb-0 mr-2">Year:</label> <select id="yearForMonthly" class="form-control form-control-sm" style="width: 150px;"> <?php $currentYear = date('Y'); for ($i = 2023; $i <= $currentYear; $i++) { $selected = $i == $currentYear ? 'selected' : ''; echo "<option value='$i' $selected>$i</option>"; } ?> </select> </div> </div> <div id="MonthlyTicketChart" style="width: 100%; height: 400px;"></div> </div> </div> </div> <!-- Right Column (Independent) --> <div class="d-flex flex-column" style="min-width: 32%; max-width: 32%; gap: 20px;"> <!-- Ticket By Priority --> <div class="card shadow-lg rounded-lg" style="height: 450px; min-height: 300px;"> <div class="card-header bg-light text-center"> <h5 class="font-weight-bold text-dark">Ticket By Priority</h5> </div> <div class="card-body d-flex justify-content-center align-items-center p-2"> <div id="TicketByPriorityContainer" style="width: 100%; height: 400px;"></div> </div> </div> <!-- Top Support --> <div class="card shadow-lg rounded-lg mt-1" style="height: 450px;"> <div class="card-header bg-light text-center"> <h5 class="font-weight-bold text-dark">Top Support</h5> </div> <div class="card-body"> <div id="list-support" class="list-group"></div> </div> </div> <!-- Ticket Handling Performance & SLA Compliance --> <div class="card shadow-lg rounded-lg" style="height: 500px;"> <div class="card-header bg-light text-center"> <h6 class="font-weight-bold text-dark">Top 6 Departments by Ticket Volume</h6> </div> <div class="card-body"> <div id="TopDept" style="min-height: 400px;" class="echart"></div> </div> </div> </div> </div> @endcan </div> </div> @endsection <script src="{{ asset('js/echarts/echarts.min.js') }}"></script> <script src="{{ asset('js/apexcharts/apexcharts.min.js') }}"></script> @section('javascript') <script src="{{ asset('js/authentication/dashboard.js') }}"></script> <script> if ('speechSynthesis' in window) { console.log('Web Speech API is supported in this browser.'); } else { console.error('Web Speech API is not supported in this browser.'); } </script> @endsection
| ver. 1.4 |
.
| PHP 8.1.32 | Generation time: 0.01 |
proxy
|
phpinfo
|
Settings